import React from 'react';
import PropTypes from 'prop-types';
import Icon from '@components/icon';
import Line from '@components/line';
import Image from '@components/image';

class Case extends React.PureComponent {
  fMaterial = () => {
    const {history, item} = this.props;
    history.replace({
      pathname: '/home/case/material',
      state: {
        caseId: item._id
      }
    })
  };
  fEdit = () => {
    const {item, history} = this.props;
    history.replace({
      pathname: '/home/add',
      state: item
    });
  };
  fPurchase = () => {
    const {history} = this.props;
    history.replace({
      pathname: '/case/purchase',
      state: {}
    })
  };
  fCalendar = () => {
    const {history} = this.props;
    history.replace({
      pathname: '/case/calendar',
      state: {}
    })
  };
  renderAction = () => {
    const actions = [
      {text: '素材', icon: 'material', onClick: this.fMaterial},
      {text: '采购', icon: 'cart', onClick: this.fPurchase},
      {text: '日程', icon: 'calendar', onClick: this.fCalendar},
      {text: '编辑', icon: 'edit', onClick: this.fEdit}
    ];
    return (
      <div key='action-item-1' className='flex-between case-action'>
        {actions.map(({text, icon, onClick}, i) => [
          <div key={`case-${text}-${i}`} className='case-item' onClick={onClick}
          >
            {text} <Icon type={icon} size='xs' />
          </div>,
          ((i < actions.length - 1) ? (
            <Line key={`line-${text}-${i}`} type='vertical' style={{height: 36}} />) : null)
        ])}
      </div>
    );
  };

  render() {
    const {item} = this.props;
    const image = item.huxing || item.url;
    return (
      <div className='flex-column home-case'>
        <div className='case-title'>{item.title}</div>
        <div className='case-content'>
          {image ? (
            <Image src={image} />
          ) : item.comment || ''}
        </div>
        {this.renderAction()}
      </div>
    )
  }
}

export default Case;
Case.propTypes = {
  history: PropTypes.object.isRequired
};
